<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn>批量删除</cl-multi-delete-btn>
			<cl-export-btn type="success" :columns="table.columns" />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="请输入学生姓名或者学号，支持模糊查询" />
		</el-row>
		<el-row>
			<cl-filter label="入账日期">
				<el-date-picker
					size="mini"
					v-model="form.into_date"
					type="daterange"
					unlink-panels
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					@change="searchSubmit"
					range-separator="到"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:shortcuts="shortcuts"
				>
				</el-date-picker>
			</cl-filter>

			<cl-flex1 />
			<el-button size="mini" type="success" @click="resetSerach">重置</el-button>
		</el-row>
		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table">
				<template #column-into_date="{ scope }">
					{{ scope.row.into_date.slice(0, 10) }}
				</template>
				<template #column-name="{ scope }">
					{{ scope.row.name + ":" + scope.row.student_id }}
					<!-- {{scope.row}} -->
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, onMounted, ref } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";
import { getNowFormatDate } from "/@/core/utils";

export default defineComponent({
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		const student_list = ref([]);

		const getStudents = async function () {
			const res = await service.studentService.list();
			res.forEach((item, index) => {
				student_list.value.push({
					value: item.id,
					label: item.name + ":" + item.student_id
				});
			});
		};

		onMounted(async () => {
			await getStudents();
		});
		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					prop: "student",
					label: "姓名",
					span: 12,
					component: {
						name: "el-select",
						options: student_list.value,
						props: {
							placeholder: "请输入姓名",
							filterable: true
						}
					},
					rules: {
						required: true,
						message: "姓名不能为空"
					}
				},
				{
					prop: "money",
					label: "金额（元）",
					span: 12,
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请输入金额"
						}
					},
					rules: {
						required: true,
						message: "金额不能为空"
					}
				},
				{
					prop: "common_num",
					label: "常规课课时",
					span: 12,
					value: 40,
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请输入常规课课时"
						}
					},
					rules: {
						required: true,
						message: "常规课课时不能为空"
					}
				},
				{
					prop: "special_num",
					label: "特殊课课时",
					span: 12,
					value: 0,
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请输入特殊课课时"
						}
					},
					rules: {
						required: true,
						message: "特殊课课时不能为空"
					}
				},
				{
					prop: "into_date",
					label: "入账日期",
					span: 24,
					value: getNowFormatDate(),
					component: {
						name: "el-date-picker",
						props: {
							placeholder: "请选择入账日期",
						}
					},
					rules: {
						required: true,
						message: "入账日期不能为空"
					}
				},
				{
					prop: "discount",
					label: "优惠情况",
					span: 24,
					component: {
						name: "el-input",
						type: "textarea",
						size: "medium",
						props: {
							placeholder: "请输入优惠情况"
						}
					}
				},
				{
					prop: "note",
					label: "备注",
					span: 24,
					component: {
						name: "el-input",
						type: "textarea",
						size: "medium",
						props: {
							placeholder: "请输入备注"
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					type: "index",
					label: "#",
					width: 60
				},
				{
					prop: "name",
					label: "姓名",
					width: 140
				},
				{
					prop: "money",
					label: "金额(元)",
					width: 90
				},
				{
					prop: "into_date",
					label: "入账日期",
					width: 150
				},
				{
					prop: "common_num",
					label: "常规课数量",
					width: 120
				},
				{
					prop: "special_num",
					label: "特殊课数量",
					width: 120
				},
				{
					prop: "discount",
					label: "优惠情况"
				},
				// {
				// 	prop: "stop_time",
				// 	label: "暂停时间",
				// 	width: 140,
				// 	sortable: true
				// },
				{
					label: "操作",
					type: "op"
				}
			]
		});

		// 筛选
		// 自定义筛选
		const form = ref({
			into_date: null
		});

		// 筛选按钮提交
		const searchSubmit = function (e) {
			console.log(form.value.into_date);
			refs.value.crud.refresh({ ...form.value });
		};

		// 重置筛选条件

		const resetSerach = function () {
			form.value = {
				into_date: null
			};
			refs.value.crud.refresh({ ...form.value });
		};

		// el-date-picker
		const shortcuts = ref([
			{
				text: "上周",
				value: () => {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					return [start, end];
				}
			},
			{
				text: "上个月",
				value: () => {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					return [start, end];
				}
			},
			{
				text: "最近三个月",
				value: () => {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					return [start, end];
				}
			}
		]);

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.financeService).done();
			app.refresh();
		}

		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad,
			// 筛选
			shortcuts,
			form,
			searchSubmit,
			resetSerach
		};
	}
});
</script>
